<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>  
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>资讯——火眼TV 新视界 新感觉</title>
		<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/front_first/css/bootstrap.min.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/front_first/css/public.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/front_first/css/font-awesome.css" />
		<style type="text/css">
			.first-title{
				padding:3px 12px 3px 12px;
			}
		</style>
	</head>
	<body class="body-bg">
		<div class="header">
			<div class="header-bd">
				<div class="nav">
					<span class="fa fa-bars" aria-hidden="true"></span>
					导航
					<span class="fa fa-caret-down" aria-hidden="true"></span>
				</div>
				<div class="nav-list">
				</div>
				<!-- logo -->
				<div class="logo">
					<a href="${pageContext.request.contextPath }/common/show.html">
						<img src="${pageContext.request.contextPath }/resources/front_first/img/logo.png" alt="" />
					</a>
				</div>
				<%-- <div class="search">
					<!-- 搜索框 -->
					<div class="top">
						<div class="input-search">
							<input type="text" name="name" id="search-input" />
							<a href="javascript:searchBSeries();" class="fa fa-search" aria-hidden="true"></a>
						</div>
					</div>
					<!-- 搜索关键词 -->
					<ul>
						<c:forEach items="${keyWords}" var="item" varStatus="s">
							<li>
								<a href="javascript:void(0);" onclick="searchKeywords(this);">${item }</a>
							</li>
						</c:forEach>
					</ul>
				</div> --%>				
			</div>
			<div class="syd">
				<div class="sy-dh">
					<ul>
						<li><a href="${pageContext.request.contextPath }/common/show.html">首页</a></li>
						<li><a href="${pageContext.request.contextPath }/deputy/deputyindex.html?channel=TVPLAY">电视剧</a></li>
						<li><a href="${pageContext.request.contextPath }/deputy/deputyindex.html?channel=MOVIE">电影</a></li>
						<li><a href="${pageContext.request.contextPath }/deputy/deputyindex.html?channel=VARITY">综艺</a></li>
						<li><a href="${pageContext.request.contextPath }/deputy/deputyindex.html?channel=CARTOON">动漫</a></li>
						<li class="lia"><a href="javascript:void(0);">资讯</a></li>
					</ul>
				</div>
			</div>
		</div>
		
		<div class="list-ti">
			<div class="list-bd">
				<ul class="small-bt">
					<c:forEach items="${dictionaryTypeList }" var="item" varStatus="s">
						<c:if test="${s.index eq 0 }">
							<li class="li-cc" code=${item.code }>${item.name }</li>
						</c:if>
						<c:if test="${s.index ne 0 }">
							<li code=${item.code }>${item.name }</li>
						</c:if>
					</c:forEach>
					<!-- <li>热点首页</li>
					<li class="li-cc">今日焦点</li>
					<li>热点首页</li>
					<li>今日焦点</li>
					<li>热点首页</li>
					<li>今日焦点</li> -->
				</ul>
				<ul class="sy-all">
					
				</ul>
				<div class="djxl">
					<input id="pageCount" type="hidden" value='1'/>
					<span> 点 击 加 载 </span>
				</div>
						
			</div>
		</div>
		<div style='width:100%;float:left'>
		    <div style='margin:0 auto;width:1200px;'>
			    <div class="enjoy">
			    	<p class="big-style">合作站点</p>
			    	<ul class="hz">
			    		<c:forEach items="${partnerList }" var="item" varStatus="s">
			    			<li>
			    				<a href="${item.linkUrl }" ><img src="${baseImgPath }${item.imgUrl }" alt="" /></a>
			    			</li>
			    		</c:forEach>
			    	</ul>
			    </div>
			</div>
		</div>
		<div class="n-footer">
			<p>火眼影视通过链接的方式提供相关内容。所有内容均为第三方内容提供方提供。如涉及版权问题，请及时告知我们。</p>
			<ul>
				<li><a href="#">关于火眼</a></li>
				<li><a href="#">反馈建议</a></li>
				<li><a href="#">版权声明</a></li>
				<li><a href="#">加入收藏</a></li>
				<li><a href="#">联系我们</a></li>
			</ul>
			<p>Copyright © huoyan All Rights Reserved.</p>
			<p>沪ICP证B2-20090064号</p>
		</div>
		<script type="text/javascript" src="${pageContext.request.contextPath }/resources/front_first/js/jquery-2.2.3.min.js" ></script>
	 <%--    <script type="text/javascript" src="${pageContext.request.contextPath }/resources/front_first/js/public.js" ></script> --%>
	    <script type="text/javascript">
		  	//本地路径
	    	var prefix = "${pageContext.request.contextPath }";
	    	var baseImgPath="${baseImgPath}";
			$(document).ready(function(){
				$(".small-bt li").eq(0).click();
			})
	    	//点击类别的事件
	    	$(".small-bt li").click(function(){
	    		$(".small-bt li").removeClass("li-cc");
	    		$(this).addClass("li-cc");
	    		var param = {};
	    		param["pageNo"]=1;
	    		param["typeCode"]=$(this).attr("code");
	    		var urlLink = prefix+"/info/find";
	    		//新一页移除隐藏
	    		$(".djxl span").removeAttr("style");
	    		getFirstPageVideo(urlLink,param);
	    	});
			//点击分页的事件
			$(".djxl").click(function(){
				var num = parseInt($("#pageCount").val())+1;
				$("#pageCount").val(num);
				var param = {};
				param["pageNo"]=$("#pageCount").val();
				param["typeCode"]=$(".li-cc").attr("code");
				var urlLink = prefix+"/info/find";
				getPageNoVideo(urlLink,param);
			});
	    	
	    	/***查询载入时的显示数据***/
	    	function getFirstPageVideo(url,params){
	    		$.post(
	    				url,
	    				params,
		    			function(json){
	    					$(".sy-all a").remove();
	    					$("#pageCount").val(1);
	    					var data = eval(json);
	    					var count = data.videoCount;
	    					var pgNum=Math.ceil(count/18);
	    					if(pgNum<1||pgNum==1){
	    						$(".djxl span").css("display","none");
	    					}
	    					var videos = data.videoFromWeb;
	    					buildPage(videos);
	    					jQuery.getScript("${pageContext.request.contextPath }/resources/front_first/js/public.js");
	    				},
	    				"json"
	    		);
	    	}
	    	
	    	/***查询分页是的显示数据***/
	    	function getPageNoVideo(url,params){
	    		$.post(
	    				url,
	    				params,
		    			function(json){
	    					var data = eval(json);
	    					var count = data.videoCount;
	    					var pgNum = Math.ceil(count/18);
	    					var nowPgNum = $("#pageCount").val();
	    					if( pgNum < nowPgNum || pgNum == nowPgNum ){
	    						$(".djxl span").css("display","none");
	    					}
	    					var videos = data.videoFromWeb;
	    					buildPage(videos);
	    				},
	    				"json"
	    		);
	    	}
	    	function liHover(data){
			  	$(data).append(" <div class='run-sy-small'></div>");
			  	$('.run-sy-small').append('<img src="../resources/front_first/img/run.png" alt="" />')			    
			}
	    	function liOut(data){
			  	$(data).remove(".run-sy-small");
			  	$('.run-sy-small').remove();
			}
	    	//构建页面数据的方法
	    	function buildPage(data){
	    		$(data).each(
						function(i, item){
							var ind = "<a href='"+prefix+"/common/redirect?id="+item.id+"&channel=INFORMATION&source=youku' target='_blank'><li onmouseenter='liHover(this)' onmouseleave='liOut(this)'>";
							ind+="<img src="+baseImgPath+item.localCoverUrl+" alt='"+item.title+"' />";
							var $title = item.title;
							//标题长于
							if (jmz.GetLength($title)>18) {
								ind+="<p title='"+$title+"' class='first-title'>"+$title.substr(0,10)+"...</p>";
							}else{
								ind+="<p title='"+$title+"' class='first-title'>"+$title+"</p>";
							}
							if(item.playCount>9999){
								ind+="<p class='list-pl'>&nbsp;&nbsp;&nbsp;<span>观看次数："+(item.playCount/10000).toFixed(1)+"万</span></p>";
								
							}else{
								ind+="<p class='list-pl'>&nbsp;&nbsp;&nbsp;<span>观看次数："+item.playCount+"</span></p>";
							}
							ind+="<span class='list-timer'>"+item.timeDuration+"</span></li></a>";
							$(".sy-all").append(ind);
						}		
					);
			    		
	    	}
	    	
	    	//计算中文字符串长度
	    	var jmz = {};
			jmz.GetLength = function(str) {
			  return str.replace(/[\u0391-\uFFE5]/g,"aa").length;  //先把中文替换成两个字节的英文，在计算长度
			};
	    </script>
	</body>
</html>
